<template>
  <div class="postTemplate">
    <el-row class="row_maintain">
      <el-col :span="24">
        <el-col :span="5"
                class="left-content">
          <div class="select-company">
            <el-input v-model="seltopName"></el-input>
            <!-- <el-select v-model="selval"
                       @change="changeSel"
                       placeholder="请选择">
              <el-option v-for="item in selPost"
                         :key="item.job_template_group_id"
                         :label="item.job_template_group_name"
                         :value="item.job_template_group_id">
              </el-option>
            </el-select> -->
            <div class="head-left-btn">
              <el-button type="primary"
                         size="mini"
                         @click="addPost"
                         class="head-left-selectunit"
                         id="headLeftSelect">
                新增
              </el-button>
              <el-button size="mini"
                         @click="goOBS"
                         class="head-left-selectunit">
                返回
              </el-button>
            </div>
          </div>
          <div class="tree-container">
            <el-tree :data="Treedata"
                     :props="defaultProps"
                     highlight-current
                     @node-contextmenu='handleRightClick'
                     @node-click="handleNodeClick"></el-tree>
            <!-- <div class="postBtn">
              <el-button type="primary"
                         id="headLeftSelect"
                         @click="saveEdit">保存</el-button>
              <el-button @click="cancelEdit">取消</el-button>
            </div> -->
          </div>

        </el-col>
        <el-col :span="19"
                class="col_tabs">
          <el-tabs type="border-card"
                   class="unit_tabs">
            <el-tab-pane label="功能权限">
              <el-row class="table-container"
                      style="margin-bottom:15px;">
                <el-col class="table-content"
                        :span="24">
                  <el-table ref="clearTable"
                            :highlight-current-row="true"
                            :header-cell-style="{background:'#f5f5f5'}"
                            :data="functionLimitList"
                            border
                            class="obs-style">
                    <el-table-column type="index"
                                     label="序号"
                                     sortable
                                     align="center"
                                     width="100"
                                     show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="system_name"
                                     label="所属应用"
                                     align="center"
                                     show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column label="权限名称"
                                     prop="object_name"
                                     align="center"
                                     show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column label="管理职能"
                                     prop="manage_function"
                                     align="center"
                                     show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column label="业务领域"
                                     prop="business_field"
                                     align="center"
                                     show-overflow-tooltip>
                    </el-table-column>
                  </el-table>
                </el-col>
              </el-row>
            </el-tab-pane>
            <!-- 轻应用权限 -->
            <el-tab-pane label="轻应用权限">
              <el-row style="margin-bottom:15px"
                      class="table-container11">
                <el-col :span="24">
                  <el-table ref="obsTable"
                            :highlight-current-row="true"
                            :header-cell-style="{background:'#f5f5f5'}"
                            :data="applimit"
                            border
                            height="280"
                            class="obs-style">
                    <el-table-column prop="app_name"
                                     label="轻应用名称"
                                     align="center"
                                     show-overflow-tooltip>
                    </el-table-column>
                  </el-table>
                </el-col>
              </el-row>
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-col>
    </el-row>

    <!--鼠标右键点击出现页面-->
    <div v-show="menuVisible">
      <el-menu id="rightClickMenu"
               class="el-menu-vertical"
               @select="handleSelect"
               active-text-color="#fff"
               text-color="#fff">
        <el-menu-item index="1"
                      class="menuItem">
          <i class="el-icon-plus"
             style="color:#fff" />
          <span slot="title">设置</span>
        </el-menu-item>
        <el-menu-item index="2"
                      class="menuItem">
          <i class="el-icon-edit"
             style="color:#fff" />
          <span slot="title">删除</span>
        </el-menu-item>
      </el-menu>
    </div>
    <!-- 设置弹窗 -->
    <div class="setMenu">
      <el-dialog title="设置"
                 :visible.sync="setDialogVisible"
                 width="30%">
        <div class="setSelect">
          <el-form :model="setForm"
                   ref="setForm"
                   label-width="100px"
                   class="demo-ruleForm">
            <el-form-item label="业务领域"
                          prop="businessVal"
                          :rules="[{ required: true, message: '请选择业务领域'}]">
              <el-select v-model="setForm.businessVal"
                         multiple
                         @change="changBusiness"
                         placeholder="请选择业务领域">
                <el-option v-for="item in businessArea"
                           :key="item.value"
                           :label="item.name"
                           :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="管理职能"
                          prop="manageVal"
                          :rules="[{ required: true, message: '请选择管理职能'}]">
              <el-select v-model="setForm.manageVal"
                         multiple
                         @change="changManage"
                         placeholder="请选择管理职能">
                <el-option v-for="item in manageFunction"
                           :key="item.value"
                           :label="item.name"
                           :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer"
              class="dialog-footer">
          <el-button @click="sethandleClose('setForm')">取 消</el-button>
          <el-button type="primary"
                     @click="onSet('setForm')">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 新增弹窗  -->
      <el-dialog title="新增"
                 :visible.sync="postNamedialogVisible"
                 width="30%">
        <div class="setSelect">
          <el-form :model="validateForm"
                   ref="validateForm"
                   label-width="100px"
                   class="demo-ruleForm">
            <el-form-item label="岗位名称"
                          prop="postName"
                          :rules="[{ required: true, message: '请输入岗位名称'}]">
              <el-input v-model="validateForm.postName"
                        placeholder="请输入岗位名称"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer"
              class="dialog-footer">
          <el-button @click="addhandleClose('validateForm')">取 消</el-button>
          <el-button type="primary"
                     @click="savepostName('validateForm')">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { PostTemplateApi } from '@/services/orgainzeManage';
import { standardCodeApi } from '@/services/StandardCode'

export default {
  data () {
    return {
      seltopName: '', //顶部输入框
      selPost: [], //选择器数据
      postId: '',//选择器选中id
      selId: '',
      setForm: {
        businessVal: [],
        manageVal: [],
      },
      businessArea: [],
      manageFunction: [],
      Treedata: [],
      defaultProps: {
        label: 'job_template_name'
      },
      validateForm: {
        postName: '', //岗位名称
      },
      postNamedialogVisible: false,
      selType: '', //新增还是设置
      currentRowNext: null,
      //功能权限
      functionLimitList: [],
      //轻应用权限列表
      applimit: [],
      //轻应用权限表单
      form: {
        name: '',
      },
      menuVisible: false, //显示右击菜单框
      setDialogVisible: false //设置弹窗
    }
  },
  created () {
    this.getPostList()
    this.leftPostTree()
  },
  mounted () {

  },
  methods: {
    //下拉框数据
    getPostList () {
      PostTemplateApi.getPostList({
        params: {
          is_page: 0,
          page: 1,
          page_size: 10
        }
      }).then(res => {
        console.log(res);
        if (res.code === 0) {
          this.selPost = res.data.list
          //现在只要项目部
          this.seltopName = this.selPost[0].job_template_group_name
          this.selId = this.selPost[0].job_template_group_id
        }
      }, err => {
        console.log(err)
      })
    },
    //选择器选中值改变
    // changeSel (val) {
    //   this.leftPostTree()
    //   this.getmanageCode()
    //   this.getbusinessCode()
    // },
    //左侧列表数据
    leftPostTree () {
      PostTemplateApi.getPostTree({
        params: {
          job_template_group_id: this.selVal,
          is_page: 0,
          page: 1,
          page_size: 10
        }
      }).then(res => {
        console.log(res);
        if (res.code === 0) {
          this.Treedata = res.data.list
        }
      }, err => {
        console.log(err)
      })
    },
    //关闭弹窗清空数据-新增
    addhandleClose (form) {
      this.$refs[form].resetFields();
      this.postNamedialogVisible = false
    },
    //新增弹窗
    addPost () {
      this.selType = '1'
      this.postNamedialogVisible = true
    },
    //新增的确定
    savepostName (form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          PostTemplateApi.addPostTemplate({
            data: {
              job_template_id: '',
              job_template_group_id: this.selId,
              job_template_name: this.validateForm.postName,
            }
          }).then(res => {
            this.$message.success('新增成功')
            this.postNamedialogVisible = false
            this.leftPostTree()
          }, err => {
            this.$message.success('新增失败')
            console.log(err)
          })
        }
      })
    },
    //管理职能选择框
    changManage (val) {
      this.setForm.manageVal = val
    },
    //业务领域选择框
    changBusiness (val) {
      this.setForm.businessVal = val
    },
    //设置的确定
    onSet (form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          let manage = this.setForm.manageVal.join(',')
          let business = this.setForm.businessVal.join(',')
          PostTemplateApi.amendPostTemplate({
            data: {
              job_template_id: this.postId,
              business_field: business,
              manage_function: manage
            }
          }).then(res => {
            this.$message.success('新增成功')
            this.setDialogVisible = false
            this.getpostDeatil()
          }, err => {
            this.$message.success('新增失败')
            console.log(err)
          })
        }
      })
    },
    //设置弹窗清空数据
    sethandleClose (form) {
      this.$refs[form].resetFields();
      this.setDialogVisible = false
    },
    //树形右击
    handleRightClick (event, data) {
      this.menuVisible = !this.menuVisible
      this.postId = data.job_template_id
      this.getpostDeatil()

      let menu = document.querySelector('#rightClickMenu')
      /* 菜单定位基于鼠标点击位置 */
      menu.style.left = event.clientX + 20 - 200 + 'px'
      menu.style.top = event.clientY - 15 + 'px'
      menu.style.position = 'absolute' // 为新创建的DIV指定绝对定位
      menu.style.width = 160 + 'px'
    },
    //点击菜单
    handleSelect (key) {
      this.getmanageCode()
      this.getbusinessCode()
      console.log(key);
      if (key === '1') {
        this.setDialogVisible = true
        this.menuVisible = false
      } else if (key === '2') {
        this.onDelete()
      }
    },
    //树形节点被点击
    handleNodeClick (data) {
      console.log(data);
      this.postId = data.job_template_id
      this.getpostDeatil()
      this.menuVisible = false
    },
    //右边列表
    getpostDeatil () {
      PostTemplateApi.getPostDetail({
        params: {
          job_template_id: this.postId
        }
      }).then(res => {
        console.log(res.data);
        if (res.code === 0) {
          this.functionLimitList = res.data.object_list
          this.applimit = res.data.app_list
          this.setForm.businessVal = res.data.business_field
          this.setForm.manageVal = res.data.manage_function
        }
      }, err => {
        console.log(err)
      })
    },
    // 获取业务领域标准码
    getbusinessCode () {
      standardCodeApi.getStandardCodeData({
        params: {
          code_type: 'businessField',
          is_page: 0
        }
      }).then((res) => {
        this.businessArea = res.data.list
      }).catch((error) => {
        console.log(error)
      })
    },
    // 获取管理职能标准码
    getmanageCode () {
      standardCodeApi.getCodeNoToken({
        params: {
          code_type: 'manageFunction',
          is_page: 0,
          system_no: "ass",
          no_token: "1"
        }
      }).then((res) => {
        this.manageFunction = res.data.list
      }).catch((error) => {
        console.log(error)
      })
    },
    //菜单删除
    onDelete () {
      this.menuVisible = false
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        PostTemplateApi.deletePostTemplate({
          params: {
            job_template_id: this.postId
          }
        }).then(res => {
          console.log(res.data);
          if (res.code === 0) {
            this.$message.success('删除成功!');
            this.leftPostTree()
            this.functionLimitList = []
            this.applimit = []
          }
        }, err => {
          console.log(err)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //返回
    goOBS () {
      this.$router.push({ path: '/OBSMaintain' })
    },
    //保存
    saveEdit () {

    },
    //取消
    cancelEdit () {
      this.$router.push({ path: '/OBSMaintain' })
    },
  },
  computed: {},
  watch: {}
}
</script>

<style lang="scss" scoped>
.setSelect {
  .el-input {
    width: 80%;
  }
  .el-select {
    width: 80%;
  }
}
.head-left-selectunit {
  width: 50%;
  // margin: 0px;
  padding: 0px;
  text-align: center;
  height: 40px;
  line-height: 40px;
}
.head-left-btn {
  display: flex;
  justify-content: space-between;
  width: 50%;
}
.Permiss /deep/ .el-tabs__header {
  padding: 0;
  position: relative;
  margin: 0 0 15px;
  margin: 0px !important;
}
.obs-style {
  width: 100% !important;
}
/deep/ .obs-style .el-table__body tr.current-row > td {
  background: #1890ff;
  color: #fff;
}
/deep/ .obs-style .el-table__body tr.current-row > td .el-button {
  color: #fff;
}
/deep/ #pagination .el-pager .active {
  background: #1abc9c;
  color: white;
}
/deep/ #pagination .el-pager .active:hover {
  color: #fff;
}
/deep/ #pagination .el-pager li:hover {
  color: #1abc9c;
}
#back-style {
  color: white;
  background: rgba(26, 188, 156, 1);
}
#headLeftSelect {
  background: rgba(26, 188, 156, 1);
}
.show-dialog-style {
  margin-bottom: 20px;
}
/deep/ .show-table-style .current-row > td {
  background: #1890ff !important;
  color: white;
}
/deep/ .person-style .el-input-group__append {
  border-left: 0;
  background: #1abc9c !important;
  border: 3px solid #1abc9c !important;
  color: white;
  border-radius: 4px;
}
/deep/ .el-tabs__content {
  overflow: hidden;
  position: relative;
  padding: 0px 0px !important;
}
.select-company {
  display: flex;
}
/deep/ .select-company .el-input {
  margin-right: 20px;
  width: 50%;
}
.el-pagination {
  text-align: center;
}
.postTemplate {
  background: #ffffff;
  height: 100%;
  min-height: 400px;
}
.row_maintain {
  padding: 20px;
  height: 100%;
  > .el-col {
    height: 100%;
    .left-content {
      height: 100%;
      display: flex;
      flex-direction: column;
    }
  }
}
.col_tabs {
  padding: 0 10px;
  padding-right: 0px !important;
  padding-left: 20px !important;
  height: 100%;
  .unit_tabs {
    height: 100%;
    display: flex;
    flex-direction: column;
    .el-tab-pane {
      height: 100%;
      .el-tabs {
        height: 100%;
      }
      .el-row {
        height: 100%;
        .table-container {
          height: 100%;
        }
        .table-content {
          height: 90%;
        }
        .obs-style {
          height: 100%;
        }
      }
    }
  }
}
.normal_btn {
  width: 100% !important;
  color: #fff;
  background: #1abc9c;
}
#obs_page {
  margin-top: 10px;
}
/deep/ #obs_page .el-pager .active {
  background: #1abc9c;
}
/deep/ #obs_page .el-pager .active:hover {
  color: #fff;
}
/deep/ #obs_page .el-pager li:hover {
  color: #1abc9c;
}
/deep/ .Permiss .el-tabs__header {
  margin-top: 0px !important;
  border-bottom: none !important;
}
/deep/ .Permiss .el-tabs--card > .el-tabs__header {
  border-bottom: none !important;
}
.tree-container {
  margin-top: 20px;
  width: 100% !important;
  min-height: 400px;
  flex: 1;
  .postBtn {
    position: absolute;
    bottom: 10px;
  }
}
/deep/ .unit_tabs .el-tabs__item {
  font-size: 15px;
}
/*************************标签鼠标右击页面样式******************************/
.el-menu-vertical {
  border: 3px solid rgb(84, 92, 100);
  border-radius: 10px;
  z-index: 100;
}
.el-menu-vertical i {
  color: #777777;
}
.menuItem {
  height: 40px;
  line-height: 40px;
  background-color: #545c64;
  font-size: 1.2rem;
}
.menuItem:hover {
  background-color: #409eff;
}
.add_tips /deep/ .el-form-item__label {
  padding-left: 28px;
}
.permission-tree-container {
  width: 300px;
  .el-tree {
    min-height: 300px;
    height: auto;
  }
  .tips {
    color: #9e9e9e;
    margin-bottom: 10px;
    text-align: center;
  }
}
</style>
